<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>单线图</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <!--    -->
    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>


<body id="body">
<div id='map'></div>
<div class="opt_panel">


    <button onclick="onStartDraw()">开始框选(默认矩形)</button>
    <button onclick="onEndDraw()">停止框选</button>
    <button onclick="onExport()">导出选中设备PNG</button>
    <br>
    <button onclick="onSetType('point')">点选</button>
    <button onclick="onSetType('circle')">圆形</button>
    <button onclick="onSetType('rectangle')">矩形</button>
    <button onclick="onSetType('polygon')">多边形</button>
    <br>
    <label style="background: #fff">按F12在调试工具的console中查看选择结果</label>
    <br>
    <!--    <button onclick="onSetFillStyle()">更改选择框填充色</button>-->
<!--    <button onclick="onSetSelectTypes()">不选择文本</button>-->
<!--    <button onclick="onSetSelectedColor()">更改选中的颜色</button>-->
<!--    <button onclick="onSetIsAddOn()">切换是否追加选择</button>-->

<!--    <button onclick="onSetLayers()">只查询变压器</button>-->
    <br>
    <div style="background: #fff;">框选后，点击下面的馈线oid按钮进行出图过滤</div>
    <div id="devList" style="width:200px;text-align: left;background: #fff;width:400px;"></div>
<!--    <input id="dkxOid" placeholder="请输入大馈线OID">-->
<!--    <button onclick="openLineMap()">开单线图</button>-->
    <button onclick="resetGrid()">移除过滤参数</button>
</div>
</body>

</html>

<script>

    function resetGrid(){
        let vecData = gridLayer.getVecRequestData()
        vecData.layers = ''
        vecData.displayfilter = ''
        gridLayer.setVecRequestData(vecData)
        gridLayer.refresh()
    }

    function openLineMap(devOid) {
        let oid = devOid || document.getElementById('dkxOid').value
        console.log(oid)

        lines.forEach(item => {
            if (item.properties.oid == oid) {
                let bounds = egisV2.util.DataUtil.calcBounds(item.geometry.coordinates)
                map.fitBounds(bounds)
            }
        })

        get(msServiceUrl + '/queryservice/psrquery/findLineEquip', {
            psrid: oid
        }, {token: egisV2.MicroService.serviceInfo.token}).then(
            res => {
                if (res.data.success) {
                    let layerIds = []
                    let filterConditions = []
                    for (let typeId in res.data.resultValue) {
                        layerIds.push(typeId)
                        let filterObj = {}
                        filterObj[typeId] = `oid in (${res.data.resultValue[typeId]})`
                        filterConditions.push(filterObj)
                    }
                    let vecData = gridLayer.getVecRequestData()
                    vecData.layers = layerIds.join(',')
                    vecData.displayfilter = JSON.stringify(filterConditions)
                    gridLayer.setVecRequestData(vecData)
                    gridLayer.refresh()

                } else {
                    alert(res.data.message);
                }
            },
            err => {

            }
        ).catch(e => {

        })
    }

    //示例说明：
    //本示例展示如何在不通的底图之间进行切换（主要是影像图和矢量图切换时有差异）


    //自定义示例参数
    // gridLayerOptions = {
    //     layers:'300000'
    // }
    // mapOptions = {
    //     zoom: 23,
    //     center: {lng: 107.97619381466961, lat: 34.28378301402492}
    // }
    selectToolOptions = {
        layers: ['100001'],
// filterLayers:['300000']
// selectTypes: ['point']
    }

    //示例功能代码
    //是否追加选择（连续选择）
    var isAddOn = false

    function onSetIsAddOn(val) {
        isAddOn = !isAddOn
        selectTool.setIsAddOn(isAddOn)
    }

    function onSetSelectTypes() {
        selectTool.setSelectTypes(['point', 'line', 'fill'])
    }

    function onSetSelectedColor() {
        let color = 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',1)'
        selectTool.setSelectedColor(color, true)
    }

    function onSetType(val) {
        selectTool.setDrawType(val)
        onStartDraw()
    }

    //开启框选工具
    function onStartDraw() {
//框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
        selectTool.enable()
// map && map.egis.selectionSet.setFlicker(true)
    }

    //关闭框选工具
    function onEndDraw() {
        selectTool.disable(true)
    }

    function onExport() {
        map.egis.selectionSet.exportImage(true)
    }

    var setlayerFlag = false

    function onSetLayers() {
        if (setlayerFlag) {
            selectTool.setLayers()
        } else {
            selectTool.setLayers(['301000'])
        }
        setlayerFlag = !setlayerFlag

    }

    let colors = ['#ff0000', '#00ff00', '#0000ff', '#ff00ff', '#ffff00']
    let index = 0


    let lines = []

    function initPage() {
        initSelectTool()
        selectTool.on(egisV2.event.SelectEvent.DEVS_SELECTED, e => {
            lines = e.devs
            let btns = []
            lines.forEach(item => {
                console.log(item.properties.oid)
                console.log(JSON.stringify(item.geometry))
                console.log('------------------')
                btns.push(`<button onclick="openLineMap(\'${item.properties.oid}\')">${item.properties.oid}</button>`)
            })
            document.getElementById('devList').innerHTML = btns.join('')
        })
        map.egis.selectionSet.setAutoFlicker(false)
        map.egis.selectionSet.setFlicker(false)
        map.egis.selectionSet.setFillOpacity(0)

        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()

//如果需要可以自行增加追加选择的快捷键 --- 增加一个快捷键控制功能，按住a进行追加选择，松开a恢复到单选模式
// window.onkeydown = function(e){
//     console.log(e)
//     if(e.keyCode == 65){
//         selectTool.setIsAddOn(true)
//     }
// }
//
// window.onkeyup = function(e){
//     console.log(e)
//     if(e.keyCode == 65){
//         selectTool.setIsAddOn(false)
//     }
// }
    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
